<template>
	<div class="activity-promotion table-theme">
		<head-title title="营销--活动推广"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="status" @roleType="stateType"></tabs-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
					<div class="add" style="margin-right: 10px;">
						<el-button type="primary" @click="addActive">添加</el-button>
					</div>
					
				</div>
			</div>
			<div class="sign-export-view add">
				<p>总数据数：{{total}}</p>
			</div>
			<el-table :data="List">
				<el-table-column label="序号" align="center" prop="generalize_list_id"></el-table-column>
				<el-table-column label="活动标题	" align="center" prop="title"></el-table-column>
				<el-table-column label="副标题" align="center" prop="message"></el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.img"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="url" align="center" prop="url"></el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.stutas" :active-value="1" :inactive-value="0" @change="upDown($event, scope.row.generalize_list_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center" width="250">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="relation(scope.row.generalize_list_id)">关联图片</el-button>
						<el-button type="primary" size="mini" @click="edit(scope.row.generalize_list_id)">编辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.generalize_list_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import editActivitySpread from '@/components/layer-dialog/edit-activity-spread.vue';
	import ImgPopover from '@/components/ImgPopover';
	import TabsView from '@/components/TabsView'
	export default {
		components: {
			ImgPopover,
			editActivitySpread,
			TabsView
		},
		data() {
			return {
				searchContent: '',
				classSelect: '',
				searchOption: [{
					value: 0,
					label: 'ID'
				}],
				List: [], // 列表
				total: 0,
				totalData: 0,
				status: 2,
				page: 0,
				classifyList: ['全部','下架','上架']
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					store_id:localStorage.getItem('store_id')
				};
				if (this.status != 0) {
					data.stutas = this.status- 1
				} else {
					delete data.stutas
				}

				if (this.classSelect == 0 && this.searchContent != '') {
					data.generalize_list_id = this.searchContent;
				}

				this.$http(this.$ApiList.GeneralizeList, data).then(res => {
					if (res.datas.length != 0) {
						this.List = res.datas.data;
						this.total = res.datas.count;
						this.totalData = res.datas.count;
						
					}
				});
			},
			stateType(type) {
				this.status = type;
				this.init();
			},
			// 搜素
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			// 上下架
			upDown(type, e, id) {
				let data = {
					generalize_list_id: id,
					stutas: e
				};
				this.$http(this.$ApiList.GeneralizeDown, data).then(res => {
					this.$layer.msg('操作成功');
					this.page = 1;
					this.init();
				});
			},
			// 删除
			del(id) {
				this.$confirm('此操作将永久删除, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							generalize_list_id: id
						};
						this.$http(this.$ApiList.GeneralizeDel, data).then(res => {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.refreshPage();
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			addActive() {
				this.$layer.iframe({
					title: '添加活动',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: editActivitySpread, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							type: 0
						} //props
					}
				});
			},
			edit(id) {
				this.$layer.iframe({
					title: '编辑活动',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: editActivitySpread, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							type: 1,
							id: id
						} //props
					}
				});
			},
			relation(id) {
				this.$router.push({
					path: '/relation_image',
					query: {
						id: id
					}
				});
			},
			refreshPage() {
				this.page = 1;
				this.status = 3;
				this.init()
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
	.activity-promotion {
		.sign-export-view p {
			text-align: right;
			line-height: 30px;
		}
	}
</style>
